<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="plugins/elementui/index.css">
        <link rel="stylesheet" href="css/login.css">
    </head>
    <body class="hold-transition skin-purple sidebar-mini">
        <div id="app">
            <div class="login-container">
                <el-form ref="dataEditForm" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"  class="demo-ruleForm" style="top: 50%;left: 35%">
                    <el-form-item prop="name" >
                        <el-input placeholder="用户名" type="name" v-model="ruleForm.name" style="padding-left: 0px"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="密码" v-model="ruleForm.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input type="code" v-model="ruleForm.code" placeholder="验证码">
                            <template slot="append" >
                                <img id="num" :src="code_url"/>
                                <!--									从Vue中调用名为getImage()的方法-->
                                <a href="javascript:;" @click="getVertifyCode">换一张</a>
                            </template>
                        </el-input>
                    </el-form-item>
                    <div style="padding-left: 200px;display: inline-block"><span>没有账号？</span><a style="color: #66b1ff" href="register.html">点击注册</a></div>

                        <el-button type="primary" @click="submitForm('ruleForm')" style="display: block;margin-left: 235px">提交</el-button>
                </el-form>
              </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="./js/vue.js"></script>
    <script src="./plugins/elementui/index.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script>
        new Vue({
            el: '#app',
                data(){
                    return {
                        ruleForm: {
                            name: '',
                            password: '',
                            code: ''
                        },
                        rules: {
                            name: [{required: true, message: '账号为必填项', trigger: 'blur'}],
                            password: [{required: true, message: '密码为必填项', trigger: 'blur'}]
                        },
                        code_url:''
                    }
                },
                created () {
                    this.getVertifyCode() // 页面初始化从后端加载验证码
                },
                methods: {

                    // 获取验证码
                    async getVertifyCode () {
                        axios.get("/login/getVertifyCodeImage.do?time="+Math.random()).then((res) => {
                            console.log(res)
                            this.code_url = res.data // 验证码图片渲染
                        })

                    },
                    submitForm(ruleForm) {
                        this.$refs['dataEditForm'].validate((valid) => {
                            if (valid) {
                                axios.post("/login/login.do",this.ruleForm).then((res) => {
                                    if(res.data.flag){
                                        this.$message({
                                            message:res.data.message,
                                            type:'success'
                                        });
                                        location.href="/pages/main.html?name="+res.data.data.name;
                                    }else{
                                        this.$message.error(res.data.message);
                                        this.getVertifyCode();
                                    }
                                });
                            } else {
                                console.log('请输入账号和密码');
                                return false;
                            }
                        });
                    },
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    }
                }

        })

    </script>
</html>
